<script setup lang="ts">
import { ref, type Ref } from 'vue';
import { useRouter } from 'vue-router';
import Contact from '@/components/Contact.vue';

/** Drawer menu items */
const items: Ref<Record<string, any>[]> = ref([
  {
    title: 'HOME',
    to: { name: 'Home' },
  },
  // {
  //   title: '-', // Divider
  // },
  {
    title: 'PROPOSALS',
    to: 'https://vote.sdao.win/#/',
  },
  {
    title: 'IDO',
    to: { name: 'IDO' },
  },
  {
    title: 'NFT',
    to: { name: 'NFT' },
  },
  {
    title: 'DASHBOARD',
    to: { name: 'Dashboard' },
  },
]);

const router = useRouter();

const emit = defineEmits<{
  (e: 'hidden', show: boolean): void;
}>();

const toPage = (item: Record<string, any>) => {
  if (item.title === 'PROPOSALS') {
    emit('hidden', false);
    window.open(item.to);
  } else {
    emit('hidden', false);
    router.push(item.to);
  }
};

const closeMenu = () => {
  emit('hidden', false);
};
</script>

<template>
  <div class="flex flex-col justify-between h-full">
    <div>
      <div class="fold-menu">
        <v-icon color="#7A7893" @click.stop="closeMenu">mdi-menu-open</v-icon>
      </div>
      <v-list class="overflow-y-hidden m-menu" nav dense>
        <div v-for="item in items" :key="item.title" class="m-tabs-item">
          <v-divider v-if="item.title === '-'" />
          <template v-else>
            <!-- Menu Item -->
            <v-list-item
              v-if="!item.items"
              @click.stop="toPage(item)"
              :disabled="!item.to"
              link
            >
              <v-list-item-title class="menu-title">
                {{ item.title }}
              </v-list-item-title>
            </v-list-item>
            <!-- Sub menu -->
            <v-list-group v-else v-model="item.active" no-action>
              <template #activator>
                <v-list-item link>
                  <v-list-item-avatar v-if="item.icon" left>
                    <v-icon>{{ item.icon }}</v-icon>
                  </v-list-item-avatar>
                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item>
              </template>
              <!-- Sub menu item -->
              <v-divider v-if="item.title === '-'" />
              <v-list-item
                v-for="subItem in item.items"
                :key="subItem.title"
                :to="subItem.to"
                :disabled="!subItem.to"
                link
              >
                <v-list-item-avatar v-if="item.icon" left>
                  <v-icon>{{ subItem.icon }}</v-icon>
                </v-list-item-avatar>
                <v-list-item-title>{{ subItem.title }}</v-list-item-title>
              </v-list-item>
            </v-list-group>
          </template>
        </div>
      </v-list>
    </div>
    <contact></contact>
  </div>
</template>

<style scoped lang="scss">
.fold-menu {
  @apply h-[60px] leading-[60px] pl-4;
}
.menu-title {
  font-size: 18px;
  font-family: DINPro-Bold, DINPro;
  font-weight: bold;
  color: #7a7893;
}

::v-deep .v-list-item {
  height: 60px;
  line-height: 60px;
}

.m-menu {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.m-menu ::-webkit-scrollbar {
  display: none;
}

</style>
